<template>
    <view class="image-item">
        <LazyImage :src="photoData.image_url_c" :mode="mode" :imageStyle="imageStyle" :isActive="showEditMenu"></LazyImage>
        <view class="edit-menu" :style="[menuStyle]" v-if="showEditMenu">
            <view class="item" v-for="(item,index) in editList" :key="index" @click="edit(item)">
                <image class="icon" :src="item.icon" mode=""></image>
                <view class="name">{{item.name}}</view>
            </view>
        </view>
    </view>
</template>
<script>
import LazyImage from '@/components/LazyImage/index.vue';
export default {
    name: 'ImageItem',
    data() {
        return {
            editList:[
                {
                   icon:require('../static/makeWorks/delect.png'),
                   type:'delect',
                   name:'删除'
                },
                {
                    icon:require('../static/makeWorks/replace.png'),
                    type:'replace',
                    name:'替换'
                }
            ]
        };
    },
    props: {
        photoData:{
            type: Object,
            default: function() {
                return {};
            }
        },
        mode: {
            type: String,
            default: 'scaleToFill'
        },
        imageStyle: {
            type: Object,
            default: function() {
                return {
                    width: '100%',
                    height: '100%'
                };
            }
        },
        photoEleInfo: {
            type: Object,
            default: function() {
                return {};
            }
        },
        showEditMenu: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        menuStyle() {
            let info = this.photoEleInfo;
            let top='-116rpx';
            if(info&&info.top<100){
                top=info.height+20+'px'
            }else{
                top='-116rpx'
            }
            return {
                top:top
            }
        }
    },
    methods: {
        edit(item){
            this.$emit(`${item.type}`,this.photoData)
        }
    },
    watch: {},
    components: { LazyImage }
};
</script>
<style lang="scss" scoped>
.image-item {
    position: relative;
    width: 100%;
    height: 100%;
    .edit-menu {
        position: absolute;
        left: 50%;
        top: -116rpx;
        width: 206rpx;
        height: 90rpx;
        background: rgba(0, 0, 0, 0.7);
        z-index: 20;
        transform: translate(-50%, 0);
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .item{
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            font-size: 20rpx;
            color: #fff;
            .icon{
                width: 32rpx;
                height: 32rpx;
                margin-bottom: 10rpx;
            }
        }
    }
    .topStyle{
        top:-120rpx;
    }
    .bottomStyle{
        bottom:20rpx;
    }
}
</style>
